<template>
  <van-nav-bar title="全部消息">
    <template #left>
      <van-popover :actions="actions">
        <template #reference><van-icon name="add-o" size="18" /></template>
      </van-popover>
    </template>
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>
  <div class="box">
    <div class="box-content">
      <ul>
        <van-swipe-cell>
          <li>
            <div class="left"><img src="https://p.qqan.com/up/2020-5/2020051811245458831.jpg" alt="">
              <div class="content">
                <div class="name">123</div>
                <div class="message">2313</div>
              </div>
            </div>
            <div class="tail">三天前</div>

          </li>
          <template #right>
            <van-button square type="warning" text="删除" />
            <van-button square type="danger" text="置顶" />
            <van-button square type="success" text="标为已读" />
          </template>

        </van-swipe-cell>
        <van-swipe-cell>
          <li>
            <div class="left"><img src="https://p.qqan.com/up/2020-5/2020051811245458831.jpg" alt="">
              <div class="content">
                <div class="name">123</div>
                <div class="message">2313</div>
              </div>
            </div>
            <div class="tail">三天前</div>

          </li>
          <template #right>
            <van-button square type="warning" text="删除" />
            <van-button square type="danger" text="置顶" />
            <van-button square type="success" text="标为已读" />
          </template>

        </van-swipe-cell>
        <van-swipe-cell>
          <li>
            <div class="left"><img src="https://p.qqan.com/up/2020-5/2020051811245458831.jpg" alt="">
              <div class="content">
                <div class="name">123</div>
                <div class="message">2313</div>
              </div>
            </div>
            <div class="tail">三天前</div>

          </li>
          <template #right>
            <van-button square type="warning" text="删除" />
            <van-button square type="danger" text="置顶" />
            <van-button square type="success" text="标为已读" />
          </template>

        </van-swipe-cell>
        <van-swipe-cell>
          <li>
            <div class="left"><img src="https://p.qqan.com/up/2020-5/2020051811245458831.jpg" alt="">
              <div class="content">
                <div class="name">123</div>
                <div class="message">2313</div>
              </div>
            </div>
            <div class="tail">三天前</div>

          </li>
          <template #right>
            <van-button square type="warning" text="删除" />
            <van-button square type="danger" text="置顶" />
            <van-button square type="success" text="标为已读" />
          </template>

        </van-swipe-cell>
        <van-swipe-cell>
          <li>
            <div class="left"><img src="https://p.qqan.com/up/2020-5/2020051811245458831.jpg" alt="">
              <div class="content">
                <div class="name">123</div>
                <div class="message">2313</div>
              </div>
            </div>
            <div class="tail">三天前</div>

          </li>
          <template #right>
            <van-button square type="warning" text="删除" />
            <van-button square type="danger" text="置顶" />
            <van-button square type="success" text="标为已读" />
          </template>

        </van-swipe-cell>
        <van-swipe-cell>
          <li>
            <div class="left"><img src="https://p.qqan.com/up/2020-5/2020051811245458831.jpg" alt="">
              <div class="content">
                <div class="name">123</div>
                <div class="message">2313</div>
              </div>
            </div>
            <div class="tail">三天前</div>

          </li>
          <template #right>
            <van-button square type="warning" text="删除" />
            <van-button square type="danger" text="置顶" />
            <van-button square type="success" text="标为已读" />
          </template>

        </van-swipe-cell>
      </ul>
    </div>
  </div>
</template>

<script setup>
    const actions = [
      { text: '添加朋友' },
      { text: '发起群聊' },
      { text: '扫一扫' },
    ];
</script>

<style lang="less" scoped>
.box {
  .box-content {
    ul {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 10px;

        .left {
          display: flex;

          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }

          .content {
            margin-left: 20px;
            padding: 6px 0;

            .name {
              font-size: 18px;
            }

            .message {
              margin-top: 10px;
              color: #4f4f4f8d;
              font-size: 12px;
            }
          }
        }

        .tail {
          padding-right: 15px;
        }

      }
    }
  }
}
</style>
<style>

.van-popup{
     z-index: 2001 !important;
    position: absolute ;
    left: 0 !important;
    top: 42px !important;
    margin: 0px !important;

}
</style>